<template>
	<view class="container">
		<u-gap height="15" bgColor="#f5f5f5"></u-gap>
		<view class="unitList">
			<u-collapse :value="collapeseValue" :border="false">
				<u-collapse-item v-for="(item, index) in unitList" :key="item.type" :name="index" :title="dictLabel(unit_type, item.enterpriseType)">
					<!-- <u-cell-group :border="false">
						<u-cell title="单位名称" :border="true" :value="item.enterpriseName"></u-cell>
						<u-cell title="单位法人" :border="true" :value="item.legalName"></u-cell>
						<u-cell title="联系电话" :border="true" :value="item.legalPhone"></u-cell>
						<u-cell title="统一社会信用代码" :border="true" :value="item.enterpriseCode"></u-cell>
						<u-cell title="是否主单位" :border="false" :value="item.isMain ? '是' : '否'"></u-cell>
					</u-cell-group> -->
					<view class="info-list">
						<view class="info-item">
							<view class="info-label">单位名称</view>
							<view class="info-content ellipsis-tip" @tap="openTips" :data-index="index" :data-content="item.enterpriseName">{{ item.enterpriseName }}</view>
						</view>
						
						<view class="info-item">
							<view class="info-label">单位法人</view>
							<view class="info-content">{{ item.legalName }}</view>
						</view>
						
						<view class="info-item">
							<view class="info-label">联系电话</view>
							<view class="info-content">{{ item.legalPhone }}</view>
						</view>

						<!-- <view class="info-item">
							<view class="info-label">统一社会信用代码</view>
							<view class="info-content">{{ item.enterpriseCode }}</view>
						</view> -->

						<view class="info-item">
							<view class="info-label">是否主单位</view>
							<view class="info-content">{{ item.isMain ? '是' : '否' }}</view>
						</view>


					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty
				v-if="unitList.length == 0"
				text="暂无数据"
				style="width: 100%;"
			></u-empty>
			<ellipsis-tip ref="ellipsisTipRef" :content="tipContent"></ellipsis-tip>
		</view>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { unit_type, dictLabel} from "@/utils/common.js"
import ellipsisTip from '../components/ellipsis-tip/ellipsis-tip.vue';
const instance = getCurrentInstance();


const collapeseValue = ref([0,1,2])
const unitList = ref([])

function getUnitList(){
	if(uni.getStorageSync('activeProject')){
		unitList.value = uni.getStorageSync('activeProject').projectCorps
	}
}

/* 溢出显示 */
const ellipsisTipRef = ref(null)
const tipContent = ref('')
function openTips(e){
    const index = e.currentTarget.dataset.index;
	const content = e.currentTarget.dataset.content;

	if (content && content.length <= 18) {
		return;
	}
	uni.createSelectorQuery()
		.in(instance)
		.selectAll('.ellipsis-tip')
		.boundingClientRect((rects) => {
			let top = rects[index].top;
			tipContent.value = content;
			//ellipsisTipRef为什么是undefined
			ellipsisTipRef.value.openTips(top);
		})
		.exec();
}

onLoad((option)=>{
	getUnitList()
})

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
	::v-deep .u-gap{
		width: 100%;
	}
	::v-deep .u-cell__title-text{
		color: #666;
		width: 260rpx;
	}
	.unitList{
		width: 100%;
		background-color: #F5F5F5;
		::v-deep .u-cell__body{
		    font-size: 36rpx;
		}
		::v-deep .u-collapse-item{
			color: #101010;
			font-weight: 600;
			margin-bottom: 26rpx;
			background-color: #fff;
		}
	
		.info-list {
			padding: 0 32rpx;
			background-color: #fff;
			.info-item{
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #e1e2e7;
				padding: 28rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				&:last-child{
					border-bottom: none;
					padding: 28rpx 0 10rpx 0;
				}
				.info-label{
					color: #4b5680;
					margin-right: 32rpx;
					flex-shrink: 0;
				}
				.info-content{
					margin-left: auto;
					flex: 1;
					color: #1e253f;
					text-align: right;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.ellipsis-content {
					margin-left: 40rpx;
				}
				
			}
			
		}
	}
}
</style>